<template>
    <section class="mainSection dataDictionarySection">
        <common-toolbar text="数据字典">
        </common-toolbar>
        <div class="bigbox">
            <div class="left bluetopLine relative" :style="leftStyle">
                <div class="top">
                    <div class="bdbottomD4D8DA topTitleView">
                        <i class="blueBlock"></i>
                        <span class="littitleTop">字典列表</span>
                        <p class="fontClass">
                            <image-button  cls="fa fa-plus-square" title="新增" @click="AddFile()" style="margin: 0;"></image-button>
                            <image-button  cls="fa fa-eyedropper" title="编辑" @click="ChangeName()" style="margin: 0;" :disabled="isEditCode"></image-button>
                            <image-button  cls="fa fa-times-rectangle" title="删除" @click="Delete()" style="margin: 0;" :disabled="isEditCode"></image-button>
                        </p>
                    </div>
                </div>
                <div class="maskDic">
                    <!-- 调用普通表格 -->
                     <common-vxeTable :tableData="tableData"   :columns="columns" :tableHeight="tableHeight-50" @cellClick="cellClick" :loading="listLoading">
                     </common-vxeTable>
                </div>
            </div>
            <div class="right" v-show="tableShow">
                <p class="addBtns">
                        <common-button text="新增"  @click="AddMask()" :disabled="isEditCode"></common-button>
                </p>
                <div class="borderTable" style="clear:both">
                    <common-vxeTable :autoResize="autoResize" :tableData="DangList" :columns="columns1" :tableHeight="tableHeight-41" :loading="listLoading2" :operatesShow="true" :operates="operates">
                    </common-vxeTable>
                </div>
            </div>
        </div>
        <!-- 数据字典新增 -->
        <el-dialog
            title="新增数据字典"
            :visible.sync="centerDialogVisible"
            class="myDialog"
            :close-on-click-modal="true">
            <el-form class="addDiogs" ref='addFiles' :model="addFiles" :rules="addFilesRules">
              <el-form-item :show-message="false" ref="title" prop="title" label="数据字典：">
                      <common-input class="checkName" v-model.trim="addFiles.title" clearable style="width:80%;margin-bottom:3px;"></common-input>
              </el-form-item>
              <el-form-item :show-message="false" ref="titleNode" prop="titleNode" label="备注：" style="margin-left:38px;">
                    <common-input class="checkName" v-model="addFiles.titleNode" clearable style="width:88%;;"></common-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <common-button @click="centerDialogVisible = false" text="取消"></common-button>
                <common-button  @click="centerDialogVisibleEvent()" text="确定" class="el-button defaultBtn"></common-button>
            </span>
        </el-dialog>
        <!-- 数据字典编辑 -->
        <el-dialog
            title="编辑数据字典"
            :visible.sync="EditcenterDialogVisible"
            class="myDialog"
            :close-on-click-modal="true">
            <el-form class="addDiogs" ref="editFiles" :model="editFiles" :rules="editFilesRules">
              <el-form-item :show-message="false" ref="title" prop="title" label="数据字典：">
                      <common-input class="checkName" v-model.trim="editFiles.title" clearable style="width:80%;margin-bottom:3px;"></common-input>
              </el-form-item>
              <el-form-item :show-message="false" ref="titleNode" prop="titleNode" label="备注：" style="margin-left:38px;">
                    <common-input class="checkName" v-model="editFiles.titleNode" clearable style="width:88%;;"></common-input>
                     <!-- <common-input placeholder="请输入文本"
                                      :value="editFiles.titleNode1"
                                      type="text"
                                      size="small"
                                      style="width:200px;"
                                      :disabled="false"
                                      required
                        ></common-input> -->
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <common-button text="取消" @click="EditcenterDialogVisible = false"></common-button>
                <common-button text="确定" @click="EditcenterDialogVisibleEvent()"></common-button>
            </span>
        </el-dialog>

        <!-- 表格字典值新增 -->
        <el-dialog
            title="新增字典值"
            :visible.sync="AddTableMask"
            class="myDialog"
            :close-on-click-modal="true">
            <el-form class="addDiog" ref='AddTableFile' :model="AddTableFile" :rules="AddTableFileRules">
              <el-form-item :show-message="false" ref="title" prop="title" label="字典值：" style="margin-left:15px;">
                      <common-input class="checkName" v-model.trim="AddTableFile.title" clearable style="width:83%;margin-bottom:3px;"></common-input>
              </el-form-item>
               <el-form-item :show-message="false" ref="title" prop="code" label="字典编码：">
                      <common-input class="checkName" v-model.trim="AddTableFile.code" clearable style="width:80%;margin-bottom:3px;"></common-input>
              </el-form-item>
              <el-form-item :show-message="false" ref="titleNode" prop="titleNode" label="备注：" style="margin-left:38px;">
                    <common-input class="checkName" v-model="AddTableFile.titleNode" clearable style="width:88%;;"></common-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <common-button text="取消" @click="AddTableMask = false" ></common-button>
                <common-button text="确定"  @click="AddTableMaskEvent()" ></common-button>
            </span>
        </el-dialog>

        <!-- 表格字典值编辑 -->
        <el-dialog
            title="编辑字典值"
            :visible.sync="EditTableMask"
            class="myDialog"
            :close-on-click-modal="true">
            <el-form class="addDiog" ref='EditTableFile' :model='EditTableFile' :rules="EditTableFileRules">
              <el-form-item :show-message="false" ref="title" prop="title" label="字典值：" style="margin-left:15px;">
                      <el-input class="checkName" v-model.trim="EditTableFile.title" clearable style="width:83%;margin-bottom:3px;"></el-input>
              </el-form-item>
               <el-form-item :show-message="false" ref="title" prop="title" label="字典编码：">
                      <el-input class="checkName" readOnly v-model.trim="EditTableFile.code"  style="width:80%;margin-bottom:3px;"></el-input>
              </el-form-item>
              <el-form-item :show-message="false" ref="titleNode" prop="titleNode" label="备注：" style="margin-left:38px;">
                    <el-input class="checkName" v-model="EditTableFile.titleNode" clearable style="width:88%;;"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="EditTableMask = false" class="el-button defaultBtn">取 消</el-button>
                <el-button type="primary" @click="EditTableMaskEvent()" class="el-button defaultBtn">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    import Service from './dataDictionary.service'
    import CommonService from '../../services/common.service'
    @Component
    export default class dataDictionary extends Vue{
         windowHeight: number;
         bodyHeight: number;
         tableHeight:number;
         rowType:number;
         DangList:any = [];
         centerDialogVisible:boolean;
         EditcenterDialogVisible:boolean;
         listLoading:boolean = false;
         listLoading2:boolean = false;
         AddTableMask:boolean;
         EditTableMask:boolean;
         addFiles:any = {};
         editFiles:any = {};
         leftStyle:any = {};
         AddTableFile:any = {};
         EditTableFile:any = {};
         listData:any = [];
         selectIndex:number;
         isEditCode:boolean = false;
         AddTableFileRules:any = {};
         EditTableFileRules:any = {};
         addFilesRules:any ={};
         editFilesRules:any = {};
         itemData:any = {};
         tableShow:boolean;
         tableIndex:number;
         columns:any = [];
         columns1:any = [];
         autoResize:Boolean;
         operates:any = {};
         tableData:any = [];
         constructor(){
            super();
            this.windowHeight = document.documentElement.clientHeight;
            this.bodyHeight = document.documentElement.clientHeight-140;
            this.tableHeight = this.bodyHeight;
            this.listLoading = false;
            this.centerDialogVisible = false;
            this.EditcenterDialogVisible = false;
            this.AddTableMask = false;
            this.EditTableMask = false;
            this.tableShow = false;
            this.leftStyle = {
                "height": Number(document.documentElement.clientHeight-120)+'px' ,
			    // "overflow-y": 'auto',
            };
            this.selectIndex = -1;
            this.DangList = [
               
            ]
            this.addFiles = {
                title:'',
                titleNode:''
            }
            this.editFiles = {
                title:'',
                titleNode:''
            }
            this.AddTableFile={
                title:'',
                code:'',
                titleNode:''
            }
            this.EditTableFile = {
                title:'',
                code:'',
                titleNode:''
            }
            this.listData = [];
            this.tableData = [];
            this.addFilesRules = {
                title: [
                    { required: true, message: '', trigger: ['blur','change'] }
                ]
            }
            this.editFilesRules = {
                title: [
                    { required: true, message: '', trigger: ['blur','change'] }
                ]
            }
            this.AddTableFileRules = {
                 title: [
                    { required: true, message: '', trigger: ['blur','change'] }
                ],
                code:[
                    { required: true, message: '', trigger: ['blur','change'] }
                ]
            }
            this.EditTableFileRules = {
                 title: [
                    { required: true, message: '', trigger: ['blur','change'] }
                ],
                code:[
                    { required: true, message: '', trigger: ['blur','change'] }
                ]
            }
            this.itemData = {};
            this.columns = [
            {
                title:'数据字典',
                field:'name'
            },
            {
                title:'备注',
                field:'comments'
            }
            ];
            this.columns1 = [
            {
                title:'字典值',
                field:'displayText'
            },
            {
                title:'字典编码',
                field:'code'
            },
             {
                title:'备注',
                field:'comments'
            }
            ];
            this.autoResize = true;
            this.operates= {
                width: 90,
                fixed: '',
                list: [
                {
                    show: true,
                    id: "001",
                    label: "编辑",
                    disabledRender: (row, column, cellValue) => {
                        return row.type == 3 || row.type == 4 ? false : true
                    },
                    operatesIcon: "editIcon",
                    method: (row,index) => {
                        this.editTable(row,index)
                    },
                },
                {
                    show: true,
                    id: "002",
                    label: "删除",
                    disabledRender: (row, column, cellValue) => {
                        return row.type == 3 || row.type == 4 ? false : true
                    },
                    operatesIcon: "delIcon",
                    method: (row,index) => {
                        this.deleteTable(row,index)
                    },
                },
                ],
            }

            }
         //新增数据字典
         AddFile(){
             this.centerDialogVisible = true;
         }
         //新增的确定
         centerDialogVisibleEvent(){
             if(!this.addFiles.title){
                 this['$message']({
                     message: '请完善数据。',
                     type: 'warning'
                 });
                 return;
             }
             Service.dicSave({
                 "name":this.addFiles.title,
	             "comments":this.addFiles.titleNode
             }).then(res=>{
                 if(res.data.succeeded == true){
                     this['$backSuccessInformation']('保存成功');
                     //   this['$message']({message:"保存成功。",type:'success'})
                     this.centerDialogVisible = false;
                     this.dicFindLists();
                     this.addFiles.title='';
                     this.addFiles.titleNode='';
                 }
             })
         }
         //编辑数据字典
         ChangeName(){
             if(this.selectIndex == -1){
                 this['$warningInformation']('请选择要编辑的数据。');
                //  this['$message']({message:"请选择要编辑的数据。",type:'warning'})
             }else{
                 this.EditcenterDialogVisible = true;
                 this.editFiles.titleNode = this.itemData.comments;
                 this.editFiles.title = this.itemData.name;
             }
             
         }
         //编辑的确定
         EditcenterDialogVisibleEvent(){
             const inputList = CommonService.findComponentDownward(this.$refs.editFiles, 'commonInput');
//            const inputList = this.findComponentDownward(this.$refs.form1, 'textarea');
            let isOk = true;
            for (let input of inputList) {
                let r = input.valid();
                //console.log(r)
                if (!r) {
                    isOk = false;
                }
            }
            if (isOk) {
                this['$message']({
                    message: '验证通过。',
                    type: 'succeed'
                });
            } else {
                this['$message']({
                    message: '验证没通过。',
                    type: 'warning'
                });
            }
             if(this.editFiles.title == ''){
                 this['$warningInformation']('请完善数据。');
                //  this['$message']({message:"请完善数据。",type:'warning'})
             }else{
                 Service.dicSave({
                    "name":this.editFiles.title,
                    "comments":this.editFiles.titleNode,
                    "id":this.itemData.id
                 }).then(res=>{
                     if(res.data.succeeded == true){
                          this['$backSuccessInformation']('保存成功。');
                        //   this['$message']({message:"保存成功。",type:'success'})
                        //   this.EditcenterDialogVisible = false;
                          this.dicFindLists();
                    }
                 })
             }
         }
         //删除数据字典
         Delete(){
             if(this.itemData.id== undefined){
                 this['$warningInformation']('请选择要删除的数据。');
                //  this['$message']({message:"请选择要删除的数据。",type:'warning'})
             }else{
                this['$confirm']('确认删除选中数据吗？', {
                    type: 'warning'
                }).then(res=>{
                     Service.dicDelete(
                         this.itemData.id,
                    ).then(res=>{
                        if(res.data.succeeded == true){
                            this['$backSuccessInformation']('删除成功。');
                            // this['$message']({message:"删除成功。",type:'success'});
                            this.dicFindLists();
                        }
                    })
                })
             }
         }
         //表格的编辑
         editTable(row,index){
             //console.log(row)
             this.EditTableMask = true;
             this.EditTableFile.title = row.displayText;
             this.EditTableFile.titleNode = row.comments;
             this.EditTableFile.code = row.code;
            //  this.tableIndex = row.id;
         }
         //表格编辑的确定
         EditTableMaskEvent(){
             let self = this;
             if(!this.EditTableFile.title || !this.EditTableFile.code){
                   this['$Warn']('请完善数据。');
             }else{
                 Service.dicDataUpSave({
                    "dictId":this.itemData.id,
                    "displayText":this.EditTableFile.title,
                    "code":this.EditTableFile.code,
                    "comments":this.EditTableFile.titleNode
                }).then(res=>{
                    if(res.data.succeeded == true){
                          self['$Suces']('保存成功');
                          this.EditTableMask = false;
                          this.colorServer();
                    }
                })
             }
             
         }
         //表格的删除
         deleteTable(row,index){
             let self = this;
             this['$askInformation']('确认删除选中数据吗？',function() {
                Service.dicDatadelete({
                    "dictId":self.itemData.id,
                    "code":row.code
                }).then(res=>{
                    if(res.data.succeeded == true){
                        self['$Suces']('删除成功。');
                        self.colorServer();
                    }
                })
            })
         }
         //新增字典值
         AddMask(){
            this.AddTableMask = true;
         }
         //表格新增确定
         AddTableMaskEvent(){
               if(!this.AddTableFile.title || !this.AddTableFile.code){
                    this['$Warn']('请完善数据。');
                 }else{
                     Service.dicDataSave({
                        "dictId":this.itemData.id,
                        "displayText":this.AddTableFile.title,
                        "code":this.AddTableFile.code,
                        "comments":this.AddTableFile.titleNode
                    }).then(res=>{
                            if(res.data.succeeded == true){
                                 this['$Suces']('保存成功');
                                this.AddTableMask = false;
                                this.colorServer();
                                this.AddTableFile.title = '';
                                this.AddTableFile.code='';
                                this.AddTableFile.titleNode='';
                            }else{
                                this['$getError'](res.data.errorMessage);
                            }
                    })
                 }
         }
         cellClick(row){
             //console.log(row)
             this.selectIndex = row.id;
             this.itemData = row;
             this.rowType = row.type;
             if(row.type === 3 || row.type === 4) {
                 this.isEditCode = false;
             } else {
                 this.isEditCode = true;;
             }
             if(this.selectIndex == -1){

             }else{
               
                    // this.DangList = [
                    //         {
                    //             displayText:"32323",
                    //             code:"55464",
                    //             comments:"564545"
                    //         }
                    //     ]
                 this.colorServer();
                 this.tableShow = true;
             }
         }
         //表格数据
         colorServer(){
             this.listLoading2 = true;
             Service.dicgetDictListByDictId({dictId:this.itemData.id}).then(res=>{
                     if(res.data.succeeded == true){
                         this.DangList = res.data.data;
                         for(let item of this.DangList) {
                             item.type = this.rowType;
                         }
                    } else {
                        this['$getError'](res.data.errorMessage);
                    }
                     this.listLoading2 = false;
                 })
         }
         //左侧数据
         dicFindLists(){
             this.listLoading = true;
             Service.dicFindList({}).then(res=>{
                 if(res.data.succeeded){
                    //console.log(res.data.data)
                    this.tableData = res.data.data;
                } else {
                    this['$getError'](res.data.errorMessage);
                }
                this.listLoading = false;
            })
         }
         created(){
            this.dicFindLists();
        }
         mounted() {
                window.onresize = () => {
                return (() => {
                    this.bodyHeight = document.documentElement.clientHeight -279;
                    this.tableHeight = this.bodyHeight;
                    this.leftStyle = {
                        "height": Number(document.documentElement.clientHeight-120)+'px' ,
                        // "overflow-y": 'auto',
                    };
                })()
            };
            
         }
         
    }
    
</script>

<style lang="scss" scoped>
    @import '../../../styles/system/dataDictionary/dataDictionary.scss';
</style>